<!DOCTYPE HTML>
<html lang="zh">
<head>
    {include file="public/meta"}
  <link rel="stylesheet" href="/static/lib/treetable/css/jquery.treetable.css">
    <title>权限菜单</title>
</head>
<body>
<div class="page-container">
    
    <form action="{:url('auth_rule')}" method="post" class="form form-horizontal" id="check-form">
    <div>
        <input type="hidden" id="id" name="id" value="{$info.id}">
        <a class="btn btn-primary radius" type="submit" onclick="form_submit(false, false, false)">&nbsp;&nbsp;提交&nbsp;&nbsp;</a>
    </div>
    <div class="mt-20">
        <table class="table table-border table-bordered table-hover table-bg table-sort" id="permission">
            <thead>
            <tr class="text-c">
                <th>名称
                    <a href="#" onclick="jQuery('#permission').treetable('expandAll'); return false;" class="btn btn-flat btn-default btn-xs"><i class="Hui-iconfont">&#xe717;</i></a>
                    <a href="#" onclick="jQuery('#permission').treetable('collapseAll'); return false;" class="btn btn-flat btn-default btn-xs"><i class="Hui-iconfont">&#xe631;</i></a>
                </th>
                <th>地址</th>
                <th>选择</th>
            </tr>
            </thead>
            <tbody>
            {if !empty($list)}
            {foreach $list as $item}
            <tr class="text-c" id = "tr_{$item.id}" data-tt-id="{$item.id}" data-tt-parent-id="{$item.pid}">
                <td>{$item.name|default=''}</td>
                <td>{$item.url}</td>
                <td class="text-right"><input name="ids[]" {in name="item.id" value="$info.rule_ids"}checked{/in} value="{$item.id}" type="checkbox"></td>
            </tr>
            {/foreach}
            {/if}
            </tbody>
        </table>
    </div>
    </form>
</div>
{include file="public/footer"}
<script type="text/javascript" src="/static/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/static/lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/static/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="/static/lib/treetable/js/jquery.treetable.js"></script>
<script>
$(document).ready(function(){
    $("#permission").treetable({ expandable: true });
    $("#permission").treetable('expandAll');
    
    // 关联选择

    // 递归获取所有子级
    function getChild(currentId){
        var arr = new Array();
        $("tr").each(function(){
            var allTrPid = $(this).attr('data-tt-parent-id');

            if (allTrPid == currentId) {
                var c = $(this).attr('data-tt-id');
                arr.push(c);
                arr = arr.concat(getChild(c));
            }
        });
        return arr;
    }

    // 递归过去所有父级
    function getParent(currentId){
        var arr = new Array();
        $("tr").each(function(){
            var allTrID  = $(this).attr('data-tt-id');
            var allTrPid = $(this).attr('data-tt-parent-id');
            if (allTrID == currentId) {
                if (allTrPid != 0) {
                    arr.push(allTrPid);
                    arr = arr.concat(getParent(allTrPid));
                }
            }
        });
        return arr;
    }

    $('[type="checkbox"]').click(function(){
        // 当前TR
        var c = $(this).parent().parent().attr('data-tt-id');
        // 父TR
        var p = $(this).parent().parent().attr('data-tt-parent-id');
        
        // 当前checkbox选中状态 它上级要被选中，下级全部被选中。
        var bool = $(this).is(":checked");
        if (bool == true) {
            // 下级全部被选中。
            $("tr").each(function(){
                var all = getChild(c);
                var mychild = $(this).attr('data-tt-id');
                for(var i = 0; i < all.length; i++){
                    if(mychild === all[i]){
                        $(this).find("input").prop("checked",true);;
                    }
                }
            });
            
            // 上级选中
            $("tr").each(function(){
                var all = getParent(c);
                var myparent = $(this).attr('data-tt-id');
                for(var i = 0; i < all.length; i++){
                    if(myparent === all[i]){
                        $(this).find("input").prop("checked",true);;
                    }
                }
            });



        } else {
            // 下级全部被取消选中。
            $("tr").each(function(){
                var all = getChild(c);
                var mychild = $(this).attr('data-tt-id');
                for(var i = 0; i < all.length; i++){
                    if(mychild === all[i]){
                        $(this).find("input").prop("checked",false);;
                    }
                }
            });
        }

    })

});
</script>
</body>
</html>